<!--  -->
<template>
  <div class="second-div">
    <el-card shadow="never">
      <div v-if="classdata.studentNum >= 0">
        <label class="tag">当前位置</label>
        <el-tag type="success" around>{{
          this.$route.query.courseName
        }}</el-tag>
        <el-tag type="success">{{ classdata.KcbjName }}</el-tag>
        <el-tag type="success">{{ classdata.studentNum }}人</el-tag>
      </div>
      <div style="margin-top: 17px; margin-bottom: 17px; padding: 0 10px">
        <el-button
          class="el-icon-plus"
          type="primary"
          plain
          @click="dialogVisible = true"
          >&nbsp添加学生</el-button
        >
        <el-button type="danger" plain v-if="isdelete" @click="deleteStudent()"
          >移除</el-button
        >
      </div>
      <div>
        <el-table
          ref="multipleTable"
          :data="classdata.student"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="id" label="学号" width="150">
          </el-table-column>
          <el-table-column prop="majorId " label="专业" width="120">
          </el-table-column>
          <el-table-column prop="classId " label="班级" width="120">
          </el-table-column>
          <el-table-column prop="time" label="加入时间" width="120">
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-dialog
          :close-on-click-modal="false"
          title="添加学生"
          :visible.sync="dialogVisible"
          width="60%"
        >
          <el-tabs type="border-card" @tab-click="tabClick">
            <el-tab-pane label="手动导入">
              <div class="sd-box">
                <el-form
                  :model="manualdataFrom"
                  ref="manualdataFrom"
                  label-width="100px"
                  class="demo-dynamic"
                >
                  <el-form-item
                    v-for="(domain, index) in manualdataFrom.student"
                    :label="'学号' + (index+1)"
                    :key="domain.key"
                    :prop="'student.' + index + '.number'"
                    :rules="{
                      required: true,
                      message: '学号不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model="domain.number"
                      placeholder="输入学生学号即可"
                      style="width: 70%"
                    ></el-input
                    >&nbsp<el-button
                      @click.prevent="removeDomain(domain)"
                      type="info"
                      plain
                      >删除</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="addDomain" type="primary" plain
                      >增加学号</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学生库中导入">
              <div>
                <selectmenus @itemclick="getClass"></selectmenus>
              </div>
              <div>
                <el-table
                  :data="libraryFrom.student"
                  style="width: 100%"
                  :default-sort="{ prop: 'date', order: 'descending' }"
                  @selection-change="libraryFromHandleSelectionChange"
                >
                  >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                  ></el-table-column>
                  <el-table-column prop="id" label="学号" sortable width="">
                  </el-table-column>

                  <el-table-column prop="name" label="姓名" width="">
                  </el-table-column>

                  <el-table-column prop="sex" label="性别" width="">
                  </el-table-column>
                  <el-table-column prop="majorId" label="专业">
                  </el-table-column>
                  <el-table-column
                    prop="classId"
                    label="班级"
                  ></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="excel导入">
              <excelupload :url="api + '/edu-topic/addTopicByFile'" style=" margin: 0 auto;"></excelupload>
            </el-tab-pane>
          </el-tabs>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitData()">添加</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import Excelupload from "../../../common/upload/excelupload.vue";
import Selectmenus from "../selectmenus.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Selectmenus ,Excelupload},
  data() {
    //这里存放数据
    return {
      sonClass: "",
      tabindex: 0,
      isdelete: false,
      dialogVisible: false,
      //手动导入表单数据
      manualdataFrom: {
        student: [{ number: "" }],
      },
      //学生库导入表单数据
      libraryFrom: {
        student: [],
        multipleSelection: [],
      },
      //课程班级详情
      classdata: {},
      multipleSelection: [], //移除学生数组
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //获取课程班级学生
    getKcbjStudent() {
      this.$http({
        url: this.$http.adornUrl(
          `/edu-kcbj/kcbj/student/${this.$route.query.classid}`
        ),
        methods: "get",
        params: this.$http.adornParams(),
      }).then((data) => {
        if (data && data.data.code == 20000) {
          this.classdata = data.data.data.data;
        } else {
          this.$message.error("未能成功获取数据");
        }
      });
    },
    //子组件菜单栏中获取自然班id,在id获取该自然班学生
    getClass(val) {
      if (this.sonClass != val.id) {
        this.sonClass = val.id;
        console.log("*********", val.id);
        this.$http({
          url: this.$http.adornUrl(`url`),
          methods: "get",
          params: this.$http.adornParams(),
        }).then((data) => {
          if (data) {
            console.log("getClass的学生数据", data);
            // this.libraryFrom.student=
          } else {
            this.$message.error("未能成功获取数据");
          }
        });
      }
    },
    tabClick(tab, event) {
      this.tabindex = tab.index;
    },
    //提交数据
    submitData() {
      console.log(this.tabindex);
      var students = [];
      if (this.tabindex == 0) {
        //提交手动导入的学生
        for (var i = 0; i < this.manualdataFrom.student.length; i++) {
          students[i] = this.manualdataFrom.student[i].number;
        }
      }
      if (this.tabindex == 1) {
        //提交学生库导入的学生
        for (var i = 0; i < this.libraryFrom.multipleSelection.length; i++) {
          students[i] = this.libraryFrom.multipleSelection[i].id;
        }
      }
      if (this.tabindex == 2) {
        //提交excel导入的学生
      }
      if (students.length > 0) {
        this.$http({
          url: this.$http.adornUrl(`url`),
          methods: "post",
          data: this.$http.adornData(
            {
              studentList: students,
            },
            false
          ),
        }).then((data) => {
          if (data && data.code == 20000) {
            this.$message({
              message: "导入学生成功",
              type: "success",
            });
            this.getKcbjStudent();
          } else {
            this.$message.error("未能成功导入学生到该班级");
          }
        });
      }
    },
    //表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.isdelete = true;
      if (this.multipleSelection.length > 0) {
        this.isdelete = true;
      } else {
        this.isdelete = false;
      }
      console.log(this.multipleSelection);
    },
    //学生库表格选择
    libraryFromHandleSelectionChange(val) {
      thia.libraryFrom.multipleSelection = val;
    },
    //移除学生
    deleteStudent() {
      this.$confirm("此操作会将选中的学生移除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            this.$http({
              url: this.$http.adornUrl(`url`), //http://localhost:8082/eduservice/edu-teacher/teacher/20205532
              method: "delete",
              params: this.$http.adornParams(),
            }).then(({ data }) => {
              if (data && data.code === 20000) {
                this.$message({
                  message: "移除学生成功",
                  type: "success",
                });
                this.getKcbjStudent();
              } else {
                this.$message.error("未能成功移除学生");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消移除",
          });
        });
    },
    //添加学生
    removeDomain(item) {
      var index = this.manualdataFrom.student.indexOf(item);
      if (index !== -1) {
        this.manualdataFrom.student.splice(index, 1);
      }
    },
    addDomain() {
      this.manualdataFrom.student.push({
        value: "",
        key: Date.now(),
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getKcbjStudent();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.second-div {
  width: 81%;
  margin: 0 auto;
}
.tag {
  color: #909399;
  padding: 0 10px;
  font-size: 15px;
  white-space: nowrap;
}
.sd-box {
  width: 50%;
  margin: 0 auto;
}
</style>